<template>
  <div class="my-cert-container">
    <div class="module-title-container">
      <div class="module-title">我的证书</div>
      <div class="module-subtitle">证书已经多到简历都放不下了</div>
    </div>
    <div class="cert-list-container">
      <div class="cert-list-wrapper">
        <div class="cert-list" :class="{ paused: isScrollPaused || isFirstRowPaused }">
          <div
            v-for="cert in certList"
            :key="cert.title"
            class="cert-item"
            @click="openCertModal(cert)"
            @mouseenter="pauseFirstRow"
            @mouseleave="resumeFirstRow"
          >
            <div class="cert-title">{{ cert.title }}</div>
            <div class="cert-image">
              <img :src="cert.link" alt="{{ cert.title }}" />
            </div>
          </div>
        </div>
        <!-- 复制一份证书列表以实现无缝循环 -->
        <div class="cert-list" :class="{ paused: isScrollPaused || isFirstRowPaused }">
          <div
            v-for="cert in certList"
            :key="`${cert.title}-copy`"
            class="cert-item"
            @click="openCertModal(cert)"
            @mouseenter="pauseFirstRow"
            @mouseleave="resumeFirstRow"
          >
            <div class="cert-title">{{ cert.title }}</div>
            <div class="cert-image">
              <img :src="cert.link" alt="{{ cert.title }}" />
            </div>
          </div>
        </div>
      </div>
      <div class="cert-list-wrapper">
        <div
          class="cert-list"
          :class="{ paused: isScrollPaused || isSecondRowPaused }"
          style="animation-duration: 40s"
        >
          <div
            v-for="cert in certListClone"
            :key="cert.title"
            class="cert-item"
            @click="openCertModal(cert)"
            @mouseenter="pauseSecondRow"
            @mouseleave="resumeSecondRow"
          >
            <div class="cert-title">{{ cert.title }}</div>
            <div class="cert-image">
              <img :src="cert.link" alt="{{ cert.title }}" />
            </div>
          </div>
        </div>
        <!-- 复制一份证书列表以实现无缝循环 -->
        <div
          class="cert-list"
          :class="{ paused: isScrollPaused || isSecondRowPaused }"
          style="animation-duration: 40s"
        >
          <div
            v-for="cert in certListClone"
            :key="`${cert.title}-copy`"
            class="cert-item"
            @click="openCertModal(cert)"
            @mouseenter="pauseSecondRow"
            @mouseleave="resumeSecondRow"
          >
            <div class="cert-title">{{ cert.title }}</div>
            <div class="cert-image">
              <img :src="cert.link" alt="{{ cert.title }}" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 证书预览模态框 -->
    <a-modal
      v-model:open="showModal"
      :title="selectedCert?.title"
      :footer="null"
      :width="selectedCert?.type === 'row' ? 600 : 1000"
      :centered="true"
      @cancel="closeCertModal"
    >
      <div class="cert-modal">
        <img :src="selectedCert?.link" :alt="selectedCert?.title" />
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
const certs = [
  {
    title: "2024团体程序设计天梯赛\n广东省三等奖",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/GPLT%E4%B8%AA%E4%BA%BA%E7%9C%81%E4%B8%89.jpg",
    type: "row",
  },
  {
    title: "2024团体程序设计天梯赛\n团体国家级优秀奖",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/GPLT%E5%9B%A2%E4%BD%93%E5%9B%BD%E4%BC%98.jpg",
    type: "row",
  },
  {
    title: "2024团体程序设计天梯赛\n团体广东省三等奖",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/GPLT%E5%9B%A2%E4%BD%93%E7%9C%81%E4%B8%89.jpg",
    type: "row",
  },
  {
    title: "2023年广东众创杯创业创新大赛优胜奖",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/%E4%BC%97%E5%88%9B%E6%9D%AF.jpg",
    type: "col",
  },
  {
    title: "工业和信息化人才岗位能力评价证书",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/%E5%B7%A5%E4%B8%9A%E5%92%8C%E4%BF%A1%E6%81%AF%E5%8C%96%E4%BA%BA%E6%89%8D%E5%B2%97%E4%BD%8D%E8%83%BD%E5%8A%9B%E8%AF%84%E4%BB%B7%E8%AF%81%E4%B9%A6.jpg",
    type: "col",
  },
  {
    title: "广东应用技术大学研究论文",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/%E5%B9%BF%E4%B8%9C%E5%BA%94%E7%94%A8%E6%8A%80%E6%9C%AF%E5%A4%A7%E5%AD%A6%E7%A0%94%E7%A9%B6.jpg",
    type: "row",
  },
  {
    title: "《心间漫步日记小程序\n软著",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/%E5%BF%83%E9%97%B4%E6%BC%AB%E6%AD%A5.jpg",
    type: "row",
  },
  {
    title: "《捉友DrawU》v1.0\n计算机软件著作权登记证书",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/%E6%8D%89%E5%8F%8Bv1.0.jpg",
    type: "row",
  },
  {
    title: "《捉友DrawU》v2.0\n计算机软件著作权登记证书",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/%E6%8D%89%E5%8F%8Bv2.0.jpg",
    type: "row",
  },
  {
    title: "《智慧课堂》\n计算机软件著作权登记证书",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/%E6%99%BA%E6%85%A7%E8%AF%BE%E5%A0%82.jpg",
    type: "row",
  },
  {
    title: "《山河智游侠》\n计算机软件著作权登记证书",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/%E6%99%BA%E6%B8%B8%E4%BE%A0.jpg",
    type: "row",
  },
  {
    title: "第十五届蓝桥杯\nWeb应用开发\n广东赛区三等奖",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/%E8%93%9D%E6%A1%A5%E6%9D%AF%E5%8D%81%E4%BA%94%E5%B1%8Aweb%E7%9C%81%E4%B8%89.jpg",
    type: "row",
  },
  {
    title: "第十六届蓝桥杯\nWeb应用开发\n全国总决赛三等奖",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/%E8%93%9D%E6%A1%A5%E6%9D%AF%E5%8D%81%E5%85%AD%E5%B1%8Aweb%E5%9B%BD%E4%BC%98.jpg",
    type: "row",
  },
  {
    title: "第十六届蓝桥杯\nWeb应用开发\n广东赛区一等奖",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/%E8%93%9D%E6%A1%A5%E6%9D%AF%E5%8D%81%E5%85%AD%E5%B1%8Aweb%E7%9C%81%E4%B8%80.jpg",
    type: "row",
  },
  {
    title: "第十四届蓝桥杯\nJava软件开发\n全国总决赛三等奖",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/%E8%93%9D%E6%A1%A5%E6%9D%AF%E5%8D%81%E5%9B%9B%E5%B1%8Ajava%E5%9B%BD%E4%BC%98.jpg",
    type: "row",
  },
  {
    title: "第十四届蓝桥杯\nJava软件开发\n广东赛区一等奖",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/%E8%93%9D%E6%A1%A5%E6%9D%AF%E5%8D%81%E5%9B%9B%E5%B1%8Ajava%E7%9C%81%E4%B8%80.jpg",
    type: "row",
  },
  {
    title: "2025年第十八届\n中国大学生计算机设计大赛\n全国总决赛三等奖",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%A4%A7%E8%B5%9B.jpg",
    type: "col",
  },
  {
    title: "《融合机器学习的改进型遗传算法》\n期刊论文",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/%E8%AE%BA%E6%96%87.jpg",
    type: "row",
  },
  {
    title: "《飞来职岗位匹配系统》\n计算机软件著作权登记证书",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/%E9%A3%9E%E6%9D%A5%E8%81%8C%E5%89%8D%E7%AB%AF.jpg",
    type: "row",
  },
  {
    title: "《飞来职智能招聘系统》\n计算机软件著作权登记证书",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/%E9%A3%9E%E6%9D%A5%E8%81%8C%E5%90%8E%E7%AB%AF.jpg",
    type: "row",
  },
  {
    title: "华为HarmonyOS\n应用开发者高级认证",
    link: "https://person-web.obs.cn-south-1.myhuaweicloud.com/cert/%E9%B8%BF%E8%92%99%E5%BC%80%E5%8F%91%E8%80%85%E9%AB%98%E7%BA%A7%E8%AE%A4%E8%AF%81.jpg",
    type: "row",
  },
];
certs.sort(() => Math.random() - 0.5);
const certList = reactive([...certs]);
certs.sort(() => Math.random() - 0.5);
const certListClone = reactive([...certs]);

// 模态框相关状态和方法
const showModal = ref(false);
const selectedCert = ref(null);

// 控制滚动的状态
const isScrollPaused = ref(false); // 查看详情时两个滚动条都停止
const isFirstRowPaused = ref(false); // 第一行悬停时停止
const isSecondRowPaused = ref(false); // 第二行悬停时停止

// 暂停第一行滚动
const pauseFirstRow = () => {
  isFirstRowPaused.value = true;
};

// 恢复第一行滚动
const resumeFirstRow = () => {
  if (!showModal.value) { // 只有当模态框未打开时才恢复滚动
    isFirstRowPaused.value = false;
  }
};

// 暂停第二行滚动
const pauseSecondRow = () => {
  isSecondRowPaused.value = true;
};

// 恢复第二行滚动
const resumeSecondRow = () => {
  if (!showModal.value) { // 只有当模态框未打开时才恢复滚动
    isSecondRowPaused.value = false;
  }
};

const openCertModal = (cert) => {
  selectedCert.value = cert;
  showModal.value = true;
  // 防止背景滚动
  document.body.style.overflow = "hidden";
  // 停止所有证书列表滚动
  isScrollPaused.value = true;
};

const closeCertModal = () => {
  showModal.value = false;
  selectedCert.value = null;
  // 恢复背景滚动
  document.body.style.overflow = "";
  // 恢复所有证书列表滚动
  isScrollPaused.value = false;
  isFirstRowPaused.value = false;
  isSecondRowPaused.value = false;
};
</script>

<style lang="scss" scoped>
.my-cert-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: auto;
  background-color: #f8f9fa;
  padding: 0;
  padding-top: 100px;
  padding-bottom: 100px;
}

.cert-list-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding-top: 50px;

  .cert-list-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: fit-content;
    height: auto;
  }

  .cert-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: fit-content;
    height: auto;
    gap: 20px;
    animation: scroll-left 60s linear infinite;
    margin-right: 20px;

    &.paused {
      animation-play-state: paused;
    }
  }

  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  .cert-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 250px;
    margin-bottom: 50px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    position: relative;

    &::after {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.6) 100%
      );
      opacity: 0;
      transition: all 0.3s ease-in-out;
    }

    &:hover {
      &::after {
        opacity: 1;
      }

      .cert-title {
        opacity: 1;
      }
    }

    .cert-title {
      position: absolute;
      bottom: 20px;
      right: 10%;
      text-align: center;
      font-size: 12px;
      width: 80%;
      color: #fff;
      opacity: 0;
      transition: all 0.3s ease-in-out;
      z-index: 10;
      word-break: break-word;
      white-space: pre-line;
    }

    .cert-image {
      height: 100%;

      img {
        height: 100%;
      }
    }
  }
}

// 证书预览模态框样式
.cert-modal {
  width: 100%;

  img {
    width: 100%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>
